<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>000HelloWorld</title>
    <link rel="stylesheet" href="css/animate.css">
    <style>
        body > div {
            border: 1px solid #000000;
            margin: 4px;
            padding: 4px;
        }
    </style>
    <script src="../vendor/vue1.0.26.js"></script>
</head>
<body>

<!--
类似于自定义指令，可以用全局方法 Vue.filter() 注册一个自定义过滤器，
它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值：
-->
<div id="app">
    <!--过滤器函数可以接收任意数量的参数：-->
    <span v-text="message|reverse 'begin' 'end' 3"></span>
</div>
<script>
    Vue.filter("reverse", function (value, begin, end) {
        return begin + " " + (value || "").split("").reverse().join("") + " " + end
    })
    new Vue({el: "#app", data: {message: "Hello"}})
</script>

<!--双向过滤器
F目前我们使用过滤器都是在把来自模型的值显示在视图之前转换它。
不过也可以定义一个过滤器，在把来自视图（<input> 元素）的值写回模型之前转化它
-->

<div id="app1">
    <input type="text" v-model="msg | myDisplay">
    <span>{{msg}}</span>
</div>
<script>
    Vue.filter("myDisplay",{
        read:function (val) {
            return "$"+val.toFixed(2)
        },
        write:function (val, oldVal) {
            var number=+val.replace(/[^\d.]/g, '')
            return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
        }
    })
    new Vue({el:"#app1",data:{
        msg:123.45
    }})
</script>

<!--如果过滤器参数没有用引号包起来，则它会在当前 vm 作用域内动态计算。
另外，过滤器函数的 this 始终指向调用它的 vm。例如-->
<div id="app2">
    <input type="text" v-model="userInput">
    <span>{{msg|concat userInput}}</span>
</div>
<script>
    Vue.filter("concat",function (value,input) {
        return [value,input].join(" ")
    })
    new Vue({el:"#app2",data:{msg:"Hello",userInput:" "}})
</script>


<!--
延迟回调在下次 DOM 更新循环之后执行。在修改数据之后立即使用这个方法，等待 DOM 更新。
// 修改数据
vm.msg = 'Hello'
// DOM 没有更新
Vue.nextTick(function () {
  // DOM 更新了
})
-->
</body>
</html>

